<template>
  <div>
    <Row class="y_query_right">
      <i-col span="24" style="text-align: right">
        <Button type="primary" icon="md-add" class="tiy_btn y_condition" @click="add" v-has=tRole.OTHER_2_101>新增</Button>
      </i-col>
    </Row>
    <hr>
    <Row>
      <i-col class="operation_item y_query_right" span="24">
        <Select v-model="param.searchParams.type"  placeholder="应用场景" clearable class="y_condition">
          <Option value="-1">请选择</Option>
          <Option v-for="item in configArgTypes" :value="item.value" :key="item.value">{{ item.name }}</Option>
        </Select>
        <Button type="primary" icon="md-search" class="tiy_btn y_condition" @click="webList">查询</Button>
      </i-col>
    </Row>

    <!--表格和分页-->
<!--    <Table stripe border class="base_table"-->
<!--           :columns="tableTitles" :data="configArgList"-->
<!--           no-data-text="暂无数据"></Table>-->
    <List style="border-top: 1px solid #e8eaec;border-bottom: 1px solid #e8eaec;margin-top: 1rem;margin-bottom: 1rem;">
      <template v-if="configArgList.length == 0">
        <ListItem><div style="width: 100%; text-align: center;">暂无数据</div></ListItem>
      </template>
      <list-item class="list_item" v-for="(item,index) in configArgList">
        <div style="width:100%;padding: 0 0.5rem;"  >
          <Row type="flex" justify="space-between">
            <i-col flex="auto" style="text-align: left" >

              <KeyValueView>#{{index+1}}</KeyValueView>
              <KeyValueView title="英文名称" ><a @click="showDetail(index)">{{ item.enName}}</a></KeyValueView>
              <KeyValueView title="中文名称" >{{item.zhName}}</KeyValueView>

              <KeyValueView title="状态" >{{ item.status == 100 ? "已启用" : "未启用"}}</KeyValueView>
              <KeyValueView v-if="configArgTypes.filter(i=>i.value==item.type).length>0" title="类型">{{configArgTypes.filter(i=>i.value==item.type)[0].name}}</KeyValueView>
<!--              <div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">-->
                <KeyValueView oneline title="参数值" >{{ item.value}}</KeyValueView>
                <KeyValueView oneline v-if="isNotEmpty(item.description)" title="说明" >{{ item.description}}</KeyValueView>
<!--              </div>-->
            </i-col>
            <i-col>
              <Button v-if="$authority('OTHER-2-201')" ghost size="small" icon="md-create" type="primary" @click="modify(index)" style="margin-right: 0.5rem">编辑</Button>
              <Button v-if="$authority('OTHER-2-202')" ghost size="small" icon="md-trash" type="error"  @click="deleteAction(item.id)" >删除</Button>
            </i-col>
          </Row>
        </div>
      </list-item>
    </List>

    <div style="float: right;">
      <Page :total="page.total" :page-size="page.stepNumber" :current="page.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[40,60,80,120]"
            show-sizer show-elevator />
    </div>

    <Modal
      v-model="status.modifyModal.isShow"
      :title="status.modifyModal.title"
      :loading="status.modifyModal.isLoading"
      @on-ok="addConfigArg"
      :scrollable="true"
      width="70%">
      <Form :model="param.configArg"   :label-width="120"
            ref="configArgForm"  :rules="configArgRules"
            style="margin:2rem 0px 1rem 0px">
            <FormItem label="中文名称 :" prop="zhName">
              <Input v-model.trim="param.configArg.zhName" placeholder="请输入" class="form_step"></Input>
            </FormItem>
            <FormItem label="英文名称 :" prop="enName">
              <Input v-model.trim="param.configArg.enName" placeholder="请输入" class="form_step"></Input>
            </FormItem>
            <FormItem label="参数值 :" prop="value">
              <Input v-model.trim="param.configArg.value" :rows="10" type="textarea" placeholder="请输入" class="form_step"></Input>
            </FormItem>
            <FormItem label="类型 :" prop="type">
              <Select v-model="param.configArg.type" class="form_step"  placeholder="参数使用场景">
                <Option value="">请选择</Option>
                <Option v-for="item in configArgTypes" :value="item.value" :key="item.value">{{ item.name }}</Option>
              </Select>
            </FormItem>
            <FormItem label="启用状态 :">

              <Checkbox v-model="param.configArg.status">已正式启用</Checkbox>
            </FormItem>
            <FormItem label="备注说明 :">
              <Input v-model.trim="param.configArg.description" placeholder="请输入" class="form_step"  type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
            </FormItem>
      </Form>
    </Modal>
    <Modal
      v-model="status.actionModal.isShow"
      :title="status.actionModal.title"
      @on-ok="webDelete">
      <br>
      <p>确定删除在线参数?</p>
      <br>
    </Modal>
    <Modal
      v-model="status.detailModal.isShow"
      :title="status.detailModal.detail.enName"
      :styles="{top: '20px',bottom:'20px',width:'60%'}"
    >
      <div>
        <row style="margin: 0.5em 0em">
          <i-col span="3" class="key">
            <span >英文名 :</span>
          </i-col>
          <i-col span="5">
            {{status.detailModal.detail.enName}}
          </i-col>

          <i-col span="3" class="key">
            <span >中文名 :</span>
          </i-col>
          <i-col span="5">
            {{status.detailModal.detail.zhName}}
          </i-col>

          <i-col span="3" class="key">
            <span >适用平台 :</span>
          </i-col>
          <i-col span="5">
            {{
            getPlatorm(status.detailModal.detail.type)
            }}
          </i-col>


        </row>

        <row style="margin: 0.5em 0em">
          <i-col span="3" class="key">
            <span >状态 :</span>
          </i-col>
          <i-col span="5">
            {{status.detailModal.detail.status===100?'已启用':'未启用'}}
          </i-col>


          <i-col span="3" class="key">
            <span >备注说明 :</span>
          </i-col>
          <i-col span="12">
            {{status.detailModal.detail.description}}
          </i-col>
        </row>
        <row style="margin: 0.5em 0em">
          <i-col span="3" class="key">
            <span >参数值 :</span>
          </i-col>
          <i-col span="21">
            <p>{{status.detailModal.detail.value}}</p>
          </i-col>
        </row>
      </div>
    </Modal>
  </div>
</template>

<!--javascript 代码-->
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  import tiyData from "./js/configArgs/config_args_data";
  import {webList,init,saveConfigArg,modifyConfigArg,deleteConfigArg,webDeleteConfigArg} from "./js/configArgs/config_args_fun";
  import KeyValueView from "../widgets/KeyValueView";
  import {isNotEmpty} from "../js/commonUtils";

  export default {
    components: {ICol,KeyValueView},
    data() {
      return {
      	// postageMethodDict:[],
        tRole:{
          OTHER_2_101: "OTHER-2-101"
        },
        page: tiyData.tPage,
        configArgList: tiyData.tData.configArgList,
        configArgTypes: tiyData.tData.configArgTypes,
        yunPath: this.$store.getters.imgPrefix,
        status: tiyData.tStatus,
        param: tiyData.tParam,
        configArgRules:tiyData.tStatus.configArgRules,
        tableTitles:tiyData.listTableTitles(this),
      }
    },
    computed: {


    },
    methods: {
      isNotEmpty(val) {
        return isNotEmpty(val);
      },
      webList(){
        tiyData.tPage.currentPage = 1;
        webList(this,tiyData);
      },
      getPlatorm(t){
        var items =  this.configArgTypes.filter(type => type.value === t);
        if (items.length>0){
          return items[0].name;
        } else
          return  "";
      },
      changePage(page){
        tiyData.tPage.currentPage = page;
        webList(this, tiyData);
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        webList(this, tiyData);
      },
     add(){
       this.$refs['configArgForm'].resetFields();
       tiyData.tParam.configArg.id='';
       tiyData.tParam.configArg.zhName='';
       tiyData.tParam.configArg.enName='';
       tiyData.tParam.configArg.value='';
       tiyData.tParam.configArg.status=false;
       tiyData.tParam.configArg.type=0;
       tiyData.tParam.configArg.description='';
       tiyData.tStatus.modifyModal.isShow=true;
       tiyData.tStatus.modifyModal.title="新增在线参数";
    },
      deleteAction(id){
        deleteConfigArg(this,tiyData,id);
      },
      webDelete(){
          webDeleteConfigArg(this,tiyData);
      },
      modify(index){
        modifyConfigArg(this,tiyData,index);
      },
      addConfigArg(){
        saveConfigArg(this,tiyData);
      },
      showDetail(index){
        tiyData.tStatus.detailModal.detail = tiyData.tData.configArgList[index];
        tiyData.tStatus.detailModal.isShow = true;
      }
    },
    mounted(){
      init(this,tiyData);
      // webList(this,tiyData);
    }
  }
</script>

<!--css样式-->
<style lang="less" scoped>
@import  (once,optional) "../css/base";
  .operation_item {
    text-align: left;
    margin-right: 20px;
  }
  .disSelect {
    background-color: #dbdbdb;
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
  }
  .itemChecked{
    background-color:#FDBDBD
  }
  .form_step {
    width:80%;
  }
  .postageRules_step {
    width:105px;
  }
  .postageRules_step_price {
    width:80px;
  }
  .postageRules_label {
    width:20%;
  }

  .country_div{
    border: solid #f1f1f1 1px;
    height: 3rem;
    margin: 8px;
    padding: 8px;
    display: -webkit-flex; /* Safari */
    display: flex;
    cursor: pointer;
    align-items:center;
    font-size: 0.9em;

    img{
      width: 2rem;
      margin-right: 1rem
    }
  }

  .countrySelected{
    background-color:#EDE7F6
  }
  .modal_base_div {
    text-align: left;
    margin-top: 20px;
    padding: 20px;
    border: dotted thin #d1d1d1
  }

  .modal_base_div_title {
    text-align: left;
    margin-bottom: 10px
  }
  .ivu-form-item-content {
    margin-left: 80px !important
  }
  .key{
   .tiy_key;
    text-align: right;
  }

.list_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.list_item:hover {
  background: @tiySectionColor;
}
</style>
